<template>
  <div class="boxWrap">
    <div class="boxTitle">
      <div class="title">
        <h1>{{pageData.baseDto.hospitalPartnerBackTitle}}</h1>
        <h2>{{pageData.baseDto.hospitalPartnerTitle}}</h2>
      </div>
      <div class="tabNav">
        {{pageData.baseDto.hospitalPartnerButton}}
      </div>
    </div>


    <div class="partnerPC" :class="{'pageEN': curLocale == 'en', 'pageZH': curLocale == 'zh'}" v-if="pageData?.hospitalPartnerList?.length > 0">
      <swiper
        ref="mySwiper"
        @swiper="onSwiper"
        :slidesPerView="5"
        :autoplay="pageData?.hospitalPartnerList.length > 5 ? swiperOptions.autoplay : false"
        :loop="true "
        :spaceBetween="10"
        :scrollbar="{ draggable: true }"
        :pagination="{ clickable: true }"
        :modules="modules"
        :navigation="swiperOptions.navigation"
      >
        <swiper-slide class="partner" v-for="(item, index) in pageData.hospitalPartnerList" :key="item">
          <div class="item" @click="goDetail(item)">
            <div class="img">
              <img :src="item.backUrl">
            </div>
            <div class="text">{{item.title}}</div>
          </div>
        </swiper-slide>
      </swiper>
    </div>


    <div class="partnerMobile">
      <div class="item" v-for="(item, index) in pageData.hospitalPartnerList" @click="goDetail(item)">
        <div class="img">
          <img :src="item.backUrl">
        </div>
        <div class="text">{{item.title}}</div>
      </div>
    </div>

  </div>
</template>

<script setup>
  import {ref, computed} from 'vue'
  import {Swiper, SwiperSlide} from 'swiper/vue';
  import {Navigation, Pagination, Scrollbar, A11y, Autoplay} from 'swiper';
  import 'swiper/css';
  import "swiper/css/free-mode"
  import "swiper/css/navigation"
  import "swiper/css/thumbs"

  import {useLocaleStore} from '@/store/locales.js'

  const curLocale = computed(() => {		// 定义计算属性
    const useLocale = useLocaleStore()
    return useLocale.locale
  })

  const props = defineProps({
    pageData: {
      type: Object,
      default: () => {
      },
    }
  })
  const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay]

  const swiperOptions = {
    loop: true,
    speed: 2000,
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
    // 显示分页
    pagination: {
      el: ".swiper-pagination",
      clickable: true, //允许分页点击跳转
    },
    // 设置点击箭头
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    }
  }

  const goDetail = (row) => {
    window.open(row.jumpUrl);
  }


  const onSwiper = () => {

  }
</script>

<style scoped lang="scss">
  @media screen and (max-width: 1079px) {
    .boxWrap {
      width: 100%;
      margin-top: 4vw;

      .partnerPC {
        display: none;
      }

      .boxTitle {
        display: flex;
        justify-content: space-between;
        line-height: 40px;
      }
      .tabNav {
        font-size: 12px;
        color: #69696F;
      }

      .partnerMobile {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        .item {
          width: 50%;
          &:nth-child(2n) {
            padding-left: 5px;
          }
          &:nth-child(2n -1) {
            padding-right: 5px;
          }
          .img {
            width: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            font-size: 12px;
            text-align: center;
            line-height: 16px;
            margin: 5px 0;
          }
        }
      }
    }
  }

  @media screen and (min-width: 1080px) {
    .boxWrap {
      width: 100%;
      margin-top: 4vw;

      .partnerMobile {
        display: none;
      }

      .tabNav {
        font-size: 0.8vw;
        color: #69696F;
        margin-top: 2vw;
      }

      .partnerPC {

        &.pageEN{
          .item {
            .text {
              line-height: 1.4vw;
            }
          }
        }

        .item {
          cursor: pointer;
          .img {
            width: 100%;
            height: 7.8vw;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            padding-top: 0.5vw;
            font-size: 0.8vw;
            text-align: center;
            line-height: 1.6vw;
            margin-bottom: 0.6vw;
          }
        }
      }
    }
  }


</style>
